<template>
  <el-dialog title="修改菜单" width="840px" :visible="visible" @close="handleClose">
    <div class="white-card">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址" prop="menuUrl">
              <el-input v-model="form.menuUrl" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="菜单编号" prop="menuCode">
              <el-input v-model="form.menuCode" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="orderby">
              <el-input v-model="form.orderby" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="父级编号" prop="pid">
              <el-cascader v-model="form.pid" :options="cascaderList" :show-all-levels="false" :props="cascaderProps" @change="handleChange" style="width: 100%" clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否是菜单" prop="menuType">
              <el-select v-model="form.menuType" style="width: 100%">
                <el-option v-for="item in menuTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" style="width: 100%">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属应用" prop="industrySectorName">
              <el-select v-model="form.industrySectorName" multiple style="width: 100%">
                <el-option v-for="item in vocations" :key="item.industrySectorName" :label="item.industrySectorName" :value="item.industrySectorName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>

      <div class="dialog-footer-btn">
        <el-button @click="handleSubmit" :loading="submitting" type="primary">确定</el-button>
        <el-button @click="handleClose" type="primary" plain>取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as menuApi from "@/api/uias/menu";
import * as mixins from "@/utils/mixins";
import * as validators from "@/utils/validators";

export default {
  name: "setCompetentDepartmentDialog",
  mixins: [mixins.dialog, mixins.form],
  props: {
    dialogData: { type: Object, default: Object },
    cascaderList: { type: Array, default: Array },
  },
  data() {
    return {
      form: {
        id: "",
        menuName: "",
        menuUrl: "",
        menuCode: "",
        orderby: "",
        menuType: "",
        status: "",
      },
      rules: {
        menuName: [{ required: true, message: "请输入" }],
        menuUrl: [{ required: true, message: "请输入" }],
        menuCode: [{ required: true, message: "请输入" }],
        orderby: [{ required: true, message: "请选择" }],
        menuType: [{ required: true, message: "请选择" }],
        status: [{ required: true, message: "请选择" }],
      },
      hasError: false,
      submitting: false,
      menuTypeOptions: [
        { label: "是", value: 1 },
        { label: "否", value: 0 },
      ],
      statusOptions: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 },
      ],
      cascaderProps: { expandTrigger: "hover", checkStrictly: true, emitPath: false, value: "id", label: "menuName", children: "menuVOS" },
    };
  },
  watch: {
    form: {
      handler() {
        this.hasError = validators.validate(this.form, this.rules);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    show() {
      console.log("this.form :>> ", this.form);
      console.log("this.dialogData :>> ", this.dialogData);
      this.form = Object.assign(this.form, this.dialogData);
    },
    handleSubmit() {
      this.submitting = true;
      this.validateAndConfirm("form")
        .then(() => {
          const form = { ...this.form, pid: this.form.pid || "-1" };
          menuApi
            .addUpdateMenu(form)
            .then((res) => {
              if (res.code === 0) {
                this.$emit("success");
                this.handleClose();
              }
            })
            .finally(() => (this.loading = false));
        })
        .then(() => {
          this.$emit("success");
          this.handleClose();
        })
        .finally(() => (this.submitting = false));
    },
    handleCascaderChange() {
      this.$refs.cascader.toggleDropDownVisible(false);
    },
    handleChange(val) {
      console.log("val :>> ", val);
    },
  },
};
</script>

<style scoped></style>
